<template>
   <div>
      <div>
      <el-form :inline="true" :model="searchModel" style="display: flex">
        <el-form-item label="井名">
            <el-input v-model="searchModel.wellName" maxlength="20"  ></el-input>
        </el-form-item>
        <el-form-item label="井型">
            <el-select v-model="searchModel.wellType" placeholder="井型" >
              <el-option label="直井" value="直井"></el-option>
              <el-option label="定向井" value="定向井"></el-option>
              <el-option label="水平井" value="水平井"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="井别">
            <el-select v-model="searchModel.wellCategory" placeholder="井别">
              <el-option label="探井" value="探井"></el-option>
              <el-option label="生产井" value="生产井"></el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item label="开钻时间">
          <el-date-picker
            v-model="datapicker"
            type="daterange"
            align="right"
            
            clearable
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd">
            :picker-options="pickerOptions" >
          </el-date-picker>
         </el-form-item>
        <el-form-item label="条件">
          <el-button type="primary" @click="submitSearchModel">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      
        <el-table
                :data="tableData"
                class="tb-edit"
                style="width: 100%">    
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="table-expand" >
                  <el-form-item v-for="(item, index) in tableHead" :key="index" :label="item.label">
                    <span>: {{ props.row[`${item.property}`] }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>        
            <el-table-column  v-for="item in tableHead" :label="item.label" :property="item.property" :key="item.index"
                    width="180">
            </el-table-column> 
        </el-table>
    </div>
    <div class="pagination-base">
      <el-pagination
        @current-change="handlePageChange"
        :current-page="1"
        :page-size="25"
        :total=totalElements
        background
        layout="total,prev, pager, next,jumper"
      >
      </el-pagination>
    </div>
  </div>
</template>

<style>
  .table-expand {
    font-size: 0;
  }
  .table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
</style>

<script>
import {getTableHead, getTableData} from '@/api/module/well'
import {mapGetters, mapMutations} from 'vuex'
import {STRATUM_TITLE, BOREHOLE_SEARCH_DATA, SEPARATOR} from '@/util/constant'
import { connect } from 'tls';
import { constants } from 'zlib';
import { networkInterfaces } from 'os';

export default {
  name: 'index',
  components: {

  },
  data () {
    return {
      searchModel:{
        wellName: "",
        wellType: "",
        wellCategory:"",
        drillDate: "",
      },
      datapicker: "",
      searchData: BOREHOLE_SEARCH_DATA,
      tableHead : [],
      tableData : [],
      temporary : [],
      totalElements: 0,
      pageIdx: 1,
      pageSize: 25
    }
  },
  
  // 多个路由共用一个页面，监听路由的改变
  watch : {
    '$route.path': function(newVal, oldVal){
      this.getHead();
      this.getData();
    }
  },

  created(){
    // 得到表头数据
    this.getHead()
  },

  mounted () {
    // 得到表的数据
    this.getData(),
    // 初始化分页查询数据
    this.initPageQuery()
  },
  methods: {
    ...mapMutations([
      'changeTableData',
      'changeTotal',
      'closeDialog',
      'changeCurrentPage'
    ]),

    change(){
      console.log("从路由中获取name:",this.$route.name)
    },

    getHead(){
        // 调用后端接口,获取表头数据
        getTableHead().then((res) => {
            this.tableHead = res.data.data;
            console.log(res.data.data)
        })
    },
    
    getData(){
        // 调用后端接口,获取表数据
        getTableData(this.pageIdx, this.pageSize).then((res) => {
          console.log("res.data.data",res.data.data.data[0])
          this.temporary = res.data.data.data[0];
          //将字符串转换成json对象
          console.log("后端获取的pageId", res.data.data.data[0].page)
          console.log("后端获取的pageSize", res.data.data.data[0].pagesize)
          this.pageIdx = this.temporary.page;
          this.pageSize = this.temporary.pagesize;
          this.totalElements = this.temporary.total;
          this.tableData= this.temporary.data;
        })
    },

    // 初始化分页查询
    initPageQuery(){
      this.pageIdx = 1,
      this.pageSize = 25,
      this.totalElements = 0
    },

    // search组件
    submitSearchModel () {
      // datepicker控件获取时间字符串，后端做分割："date0&date1"
      this.searchModel.drillDate = this.datapicker[0] + "&" + this.datapicker[1];

      getTableData(this.pageIdx, this.pageSize,this.searchModel).then((res) => {
          // console.log("res.data.data",res.data.data.data[0])
          this.temporary = res.data.data.data[0];
          // 将字符串转换成json对象
          console.log("后端获取的pageId", res.data.data.data[0].page)
          console.log("后端获取的pageSize", res.data.data.data[0].pagesize)
          this.pageIdx = this.temporary.page;
          this.pageSize = this.temporary.pagesize;
          this.totalElements = this.temporary.total;
          this.tableData= this.temporary.data;
      })
    },

    handlePageChange(val){
      console.log(`当前页: ${val}`);
      // 当前页数
      this.pageIdx = val;
      this.getData();
    },
  },
  computed: {
    ...mapGetters([
      'pageSizeGetters',
      'currentPageGetters',
      'updateModelGetters'
    ])
  }
}
</script>
